<template>
  <view class="refund-detail" v-if="info.id">
    <view class="detail-step">
      <uni-steps active-color="#10BEAF" :options="[{title: '发起退款'}, {title: '商家处理'}, {title: '商家退款'}, {title: '退款结束'}]" :active="curStep"></uni-steps>
      <view class="step-header" v-if="info.status == 2">
        <view class="h2">商家已通过，<span class="sub-theme">正在退款中</span></view>
        <view class="p">退款申请成功，已为您操作退款，请耐心等待</view>
      </view>
      <view class="step-header" v-if="info.status == 9">
        <view class="h2">退款成功</view>
      </view>
      <view class="step-card">
        <view class="card-title">
          <view class="h2" v-if="info.status == 9">退回余额</view>
          <view class="h2" v-else>钱款将原路退回</view>
          <view class="price">￥{{info.refundAmount}}</view>
        </view>
        <view class="card-p" v-if="info.status == 9">已退回，可前往“我的-钱包”查看</view>
        <view class="card-p" v-else>钱款预计1-3个自然日到账，不同渠道时间存在差异，实际退款金额以到账金额为准</view>
      </view>
    </view>
    <view class="detail-header">
      <view class="box-flex">
        <image :src="getMedia(info.storeLogo)" mode="aspectFill" class="header-img"></image>
        <view class="header-h2">{{info.orgName}}</view>
      </view>
      <view class="header-list">
        <view class="list-item" v-for="item in info.items" :key="item.orderItemId">
          <image :src="getMedia(item.url)" mode="aspectFill" class="img"></image>
          <view class="item-info">
            <view class="info-h2">
              <view class="dot2">{{item.title}}</view>
              ￥{{item.singlePrice}}
            </view>
            <view class="info-p">购买时间:{{info.created}}</view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="detail-intro" v-if="info.status == 9">
      <view class="intro-list"><p>退款方式</p> 原路返回</view>
      <view class="intro-list">
        <view class="p-label">退款金额
          <view style="font-size: 22rpx;color: #B0B0B0;">实际退款金额以到账金额为准</view>
        </view>
        ￥{{info.refundAmount}}
      </view>
      <view class="intro-list"><p>退款时间</p> {{info.updated}}</view>
    </view>
    <view class="detail-intro" v-else>
      <view class="intro-list"><p>订单编号</p> {{info.id}} <span class="copy" @click="handleCopy(info.id)">复制</span></view>
      <!-- <view class="intro-list" @click="handleToUrl(`/minePackage/order-snapshot?id=${info.id}`)"><p>交易快照</p> 服务内容不符时，可作为判断依据 <uni-icons type="right" size="14" color="#6D6D6D"></uni-icons> </view> -->
      <view class="intro-list"><p>支付方式</p> 微信支付</view>
      <view class="intro-list"><p>下单时间</p> {{info.created}}</view>
      <view class="intro-list"><p>付款时间</p> {{info.orderPayTime}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info:{},
        curStep:0
      };
    },
    onLoad(ops) {
      this.$get(`/product/orderAdjustment/getMyAdjustmentDetailV1/${ops.id}`).then(res=>{
        if(res.code == '1'){
          this.info = res.content
          if(res.content.status == '2') this.curStep = 1
          if(res.content.status == '9') this.curStep = 3
        }
      })
    }
  }
</script>

<style lang="less" scoped>
.refund-detail{
  padding: 0 24rpx 120rpx;
  min-height: 100vh;
  background: var(--page-bg);
  box-sizing: border-box;
  .detail-step{
    background: #fff;
    padding: 28rpx 24rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    .step-header{
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 2rpx solid #efefef;
      font-size: 24rpx;
      color: #6D6D6D;
      margin-bottom: 20rpx;
      .h2{
        font-size: 32rpx;
        color: var(--title-color);
        margin-bottom: 8rpx;
        font-weight: bold;
      }
    }
    .step-card{
      padding: 24rpx;
      margin-top: 20rpx;
      background: var(--page-bg);
      border-radius: 20rpx;
      .card-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .h2{
          font-size: 28rpx;
          color: var(--title-color);
          font-weight: bold;
        }
        .price{
          font-size: 36rpx;
          color: var(--theme-color);
          font-weight: bold;
        }
      }
      .card-p{
        margin-top: 12rpx;
        font-size: 24rpx;
        color: #6D6D6D;
        line-height: 28rpx;
      }
    }  // step-card
  }
  .detail-header{
    margin: 0 0 24rpx;
    background: #fff;
    border-radius: 32rpx;
    padding: 24rpx;
    .box-flex{
      align-items: center;
    }
    .header-img{
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      margin-right: 8rpx;
    }
    .header-h2{
      flex: 1;
      font-size: 24rpx;
      font-weight: bold;
      color: var(--title-color);
    }
    .header-list{
      .list-item{
        display: flex;
        font-size: 22rpx;
        font-weight: 500;
        margin: 20rpx 0 0;
        .img{
          width: 124rpx;
          height: 124rpx;
          border-radius: 20rpx;
          margin-right: 24rpx;
        }
        .item-info{
          flex: 1;
          .info-h2{
            font-size: 30rpx;
            color: var(--title-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            .dot2{
              font-size: 26rpx;
              margin-right: 10rpx;
            }
          }
          .info-p{
            margin-top: 24rpx;
            font-size: 22rpx;
            color: var(--sub-title);
          }
        }
      }
    }
  }  /// detail-header end
  .detail-intro{
    background: #fff;
    padding: 20rpx;
    border-radius: 32rpx;
    font-size: 26rpx;
    color: var(--title-color);
    margin-bottom: 20rpx;
    font-weight: bold;
    .intro-list{
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      font-size: 26rpx;
      &:first-child{
        margin-top: 0;
      }
      &.title p{
        font-size: 28rpx;
        font-weight: bold!important;
        color: var(--title-color);
      }
      p,.p-label{
        margin-right: auto;
        color: #6D6D6D;
        font-weight: 400;
      }
      .copy{
        line-height: 1;
        padding: 8rpx 22rpx;
        background: #f2f2f2;
        font-size: 24rpx;
        margin-left: 8rpx;
        border-radius: 4rpx;
        color: #6D6D6D;
      }
      .sub-theme{
        font-size: 22rpx;
        margin-left: 8rpx;
      }
      .strong{
        color: var(--sub-theme);
      }
    }
  }
}
</style>
